OffscreenCanvas: getContext() メソッド
Baseline 2023 *Newly available
Since March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
* Some parts of this feature may have varying levels of support.
メモ: この機能はウェブワーカー内で利用可能です。
OffscreenCanvas.getContext() メソッドは、オフスクリーンキャンバスの描画コンテキストを返します。コンテキスト識別子が対応していない場合、またはオフスクリーンキャンバスがすでに別のコンテキストモードに設定されている場合は null を返します。
構文
getContext(contextType, contextAttributes)
引数
contextType-
キャンバスに関連付けられた描画コンテキストを定義するコンテキスト識別子を含む文字列。実現可能な値は次のとおりです。
2d-
2 次元レンダリングコンテキストを表す
OffscreenCanvasRenderingContext2Dオブジェクトです。 webgl-
3 次元レンダリングコンテキストを表す
WebGLRenderingContextオブジェクトを作成します。このコンテキストは、WebGL バージョン 1 （OpenGL ES 2.0） を実装しているブラウザーでのみ利用できます。 webgl2-
3 次元レンダリングコンテキストを表す
WebGL2RenderingContextオブジェクトを作成します。このコンテキストは、WebGL バージョン 2 （OpenGL ES 3.0） を実装しているブラウザーでのみ利用できます。 "webgpu"-
WebGPU レンダリングパイプラインの 3 次元レンダリングコンテキストを表す
GPUCanvasContextオブジェクトを作成します。このコンテキストは、WebGPU API を実装しているブラウザーでのみ利用可能です。 bitmaprenderer-
キャンバスのコンテンツを指定された
ImageBitmapで置き換える機能のみを提供するImageBitmapRenderingContextを作成します。
メモ: 識別子
"experimental-webgl"や"experimental-webgl2"も WebGL の実装で使用されています。 これらの実装は、テストスイートの適合性に達していなかったり、プラットフォーム上のグラフィックドライバーの状況がまだ安定していなかったりします。 Khronos Group は、特定の適合性ルールに基づいて WebGL の実装を認定しています。 contextAttributes-
レンダリングコンテキストを作成する際に、複数のコンテキスト属性を使用することができます。例えば、次のようにします。
jsoffscreen.getContext("webgl", { antialias: false, depth: false });2d コンテキストの属性は次の通りです。
alpha-
論理値で、キャンバスにアルファチャンネルが含まれているかどうかを示します。
falseに設定すると、ブラウザーは背景が常に不透明であることを認識し、透明なコンテンツや画像の描画を高速化できます。 willReadFrequently-
論理値で、多くの読み戻し操作が計画されているかどうかを示します。 これにより、ハードウェアアクセラレーションではなくソフトウェアによる 2D キャンバスの使用が強制され、
getImageData()を頻繁に呼び出す場合にメモリーを節約できます。 Firefox では、このオプションはフラグgfx.canvas.willReadFrequently.enableがtrueに設定されている場合（既定では B2G/Firefox OS の場合のみ）にのみ利用できます。
WebGL コンテキストの属性は次の通りです。
alpha-
論理値で、キャンバスにアルファチャンネルが含まれているかどうかを示します。
depth-
論理値で、描画バッファーに 16 ビット以上の深度バッファーが要求されることを示します。
stencil-
論理値で、描画バッファーに 8 ビット以上のステンシルバッファーが要求されることを示します。
antialias-
論理値で、実現可能な場合にアンチエイリアシングを実行するかどうかを示します。
premultipliedAlpha-
論理値で、ページコンポジターが、描画バッファーにアルファが事前に乗算された色が含まれていると想定することを示します。
preserveDrawingBuffer-
値が true の場合、バッファーはクリアされず、作成者がクリアまたは上書きするまでその値が保持されます。
failIfMajorPerformanceCaveat-
論理値で、システムのパフォーマンスが低い場合にコンテキストが作成されるかどうかを示します。
返値
次のいずれかのレンダリングコンテキストです。
OffscreenCanvasRenderingContext2D（"2d"の場合）WebGLRenderingContext（"webgl"や"experimental-webgl"の場合）WebGL2RenderingContext（"webgl2"や"experimental-webgl2"の場合）GPUCanvasContext（"webgpu"の場合）ImageBitmapRenderingContext（"bitmaprenderer"の場合）
そのコンテキスト識別子に対応していない場合、またはキャンバスがすでに別のコンテキストモードに設定されている場合は、 null が返されます。
例外
InvalidStateErrorDOMException-
キャンバスが別のコンテキストスコープ（例えば、ワーカー）に移譲されている場合に発生します。
例
const offscreen = new OffscreenCanvas(256, 256);
const gl = offscreen.getContext("webgl");
gl; // WebGLRenderingContext
gl.canvas; // OffscreenCanvas
仕様書
| Specification |
|---|
| HTML # dom-offscreencanvas-getcontext-dev |
ブラウザーの互換性
関連情報
- このメソッドを定義しているインターフェイス:
OffscreenCanvas HTMLCanvasElement.getContext()- 利用可能なレンダリングコンテキスト:
CanvasRenderingContext2D,WebGLRenderingContext,WebGL2RenderingContext,ImageBitmapRenderingContext,OffscreenCanvasRenderingContext2D